<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Hyper | Responsive Bootstrap 4 Admin Dasboard - Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
    <meta content="Coderthemes" name="author" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="${ctx}/theme/hyper/images/favicon.ico">

    <!-- third party css -->
    <link href="${ctx}/theme/hyper/css/vendor/britecharts.min.css" rel="stylesheet" type="text/css" />
    <!-- third party css end -->

    <!-- App css -->
    <link href="${ctx}/theme/hyper/css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/theme/hyper/css/app.min.css" rel="stylesheet" type="text/css" />
    
</head>

<body>

    <!-- Begin page -->
    <div id="wrapper">

        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="content-page">
            <div class="content">
                
                <!-- Start Content-->
                <div class="container-fluid">

                    <div class="page-wrapper">

                        <!-- end left-sidebar-->

                        <div class="page-content">
                            <div class="card">
                                <div class="card-body">
                                    <div class="p-lg-1">
                                        <h3 class="mt-0 mb-2 font-weight-bold">Charts using Brite Charts</h3>
                                    </div>

                                    <div class="p-lg-1">

                                        <div class="example-container">
                                            <div class="row">
                                                <div class="col-xl-6">
                                                    <div class="card mb-3 mb-xl-0">
                                                        <div class="card-body">
                                                            <h4 class="header-title mb-4">Line Chart</h4>
                                                            <div class="line-container" style="width: 100%;"></div>
                                                        </div>
                                                        <!-- end card body-->
                                                    </div>
                                                    <!-- end card -->
                                                </div>
                                                <!-- end col-->

                                                <div class="col-xl-6">
                                                    <div class="card mb-0">
                                                        <div class="card-body">
                                                            <h4 class="header-title mb-4">Bar Chart</h4>
                                                            <div class="bar-container" style="width: 100%;height: 220px;"></div>
                                                        </div>
                                                        <!-- end card body-->
                                                    </div>
                                                    <!-- end card -->
                                                </div>
                                                <!-- end col-->
                                            </div>
                                            <!-- end row-->
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- end page-wrapper-->

                    
                </div>

            </div>
            <!-- content -->
        </div>
        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->
    </div>
    <!-- END wrapper -->

    <!-- bundle -->
    <script src="${ctx}/theme/hyper/js/app.min.js"></script>
    

    <!-- third party js -->
    <script src="${ctx}/theme/hyper/js/vendor/d3.min.js"></script>
    <script src="${ctx}/theme/hyper/js/vendor/britecharts.min.js"></script>
    <!-- third party js ends -->

    <script type="text/javascript">

    </script>

    <script type="text/javascript">
        function createBarChart(elementSelector, data) {
            var chartTooltip = new britecharts.miniTooltip();
            var _barChart = new britecharts.bar();
            var barContainer = d3.select(elementSelector),
                containerWidth = barContainer.node()
                    ? barContainer.node().getBoundingClientRect().width
                    : false,
                containerHeight = barContainer.node()
                    ? barContainer.node().getBoundingClientRect().height
                    : false,
                tooltipContainer = void 0;

            var margin = {
                top: 10,
                left: 55,
                bottom: 20,
                right: 10
            };

            _barChart
                .isAnimated(true)
                .width(containerWidth)
                .height(containerHeight)
                .margin(margin)
                .betweenBarsPadding(0.5)
                .colorSchema(["#727cf5"])
                .on("customMouseOver", chartTooltip.show)
                .on("customMouseMove", chartTooltip.update)
                .on("customMouseOut", chartTooltip.hide);

            barContainer.datum(data).call(_barChart);
            tooltipContainer = d3.select(elementSelector + " .metadata-group");
            tooltipContainer.datum([]).call(chartTooltip);
        }

        // line chart
        function createLineChart(elementSelector, data) {
            var lineChart = new britecharts.line(),
                chartTooltip = new britecharts.tooltip(),
                lineContainer = d3.select(elementSelector),
                containerWidth = lineContainer.node()
                    ? lineContainer.node().getBoundingClientRect().width
                    : false,
                tooltipContainer = void 0;

            lineChart
                .isAnimated(true)
                .aspectRatio(0.7)
                .tooltipThreshold(100)
                .grid("horizontal")
                .width(containerWidth)
                .dateLabel("date")
                .valueLabel("value")
                .on("customMouseOver", chartTooltip.show)
                .on("customMouseMove", chartTooltip.update)
                .on("customMouseOut", chartTooltip.hide);

            chartTooltip.title("Sample Data");

            //   .topicsOrder(lineData2.dataByTopic.map(function(topic) {
            //   return topic.topic;
            // }));

            lineContainer.datum(data).call(lineChart);
            tooltipContainer = d3.select(
                elementSelector + " .metadata-group .hover-marker"
            );
            tooltipContainer.datum([]).call(chartTooltip);
        };

        var barData = [
            { name: "Mon", value: 2100 },
            { name: "Tue", value: 5000 },
            { name: "Wed", value: 4000 },
            { name: "Thu", value: 5500 },
            { name: "Fri", value: 6500 },
            { name: "Sat", value: 4500 },
            { name: "Sun", value: 3500 }
        ];

        var lineData = {
            dataByTopic: [
                {
                    topic: 103,
                    topicName: "San Francisco",
                    dates: [
                        {
                            date: "27-Jun-18",
                            value: 1,
                            fullDate: "2018-06-27T07:00:00.000Z"
                        },
                        {
                            date: "28-Jun-18",
                            value: 1,
                            fullDate: "2018-06-28T07:00:00.000Z"
                        },
                        {
                            date: "29-Jun-18",
                            value: 4,
                            fullDate: "2018-06-29T07:00:00.000Z"
                        },
                        {
                            date: "30-Jun-18",
                            value: 2,
                            fullDate: "2018-06-30T07:00:00.000Z"
                        },
                        {
                            date: "1-Jul-18",
                            value: 3,
                            fullDate: "2018-07-01T07:00:00.000Z"
                        },
                        {
                            date: "2-Jul-18",
                            value: 3,
                            fullDate: "2018-07-02T07:00:00.000Z"
                        },
                        {
                            date: "3-Jul-18",
                            value: 0,
                            fullDate: "2018-07-03T07:00:00.000Z"
                        },
                        {
                            date: "4-Jul-18",
                            value: 3,
                            fullDate: "2018-07-04T07:00:00.000Z"
                        },
                        {
                            date: "5-Jul-18",
                            value: 1,
                            fullDate: "2018-07-05T07:00:00.000Z"
                        },
                        {
                            date: "6-Jul-18",
                            value: 2,
                            fullDate: "2018-07-06T07:00:00.000Z"
                        },
                        {
                            date: "7-Jul-18",
                            value: 0,
                            fullDate: "2018-07-07T07:00:00.000Z"
                        },
                        {
                            date: "8-Jul-18",
                            value: 2,
                            fullDate: "2018-07-08T07:00:00.000Z"
                        },
                        {
                            date: "9-Jul-18",
                            value: 1,
                            fullDate: "2018-07-09T07:00:00.000Z"
                        },
                        {
                            date: "10-Jul-18",
                            value: 4,
                            fullDate: "2018-07-10T07:00:00.000Z"
                        },
                        {
                            date: "11-Jul-18",
                            value: 2,
                            fullDate: "2018-07-11T07:00:00.000Z"
                        },
                        {
                            date: "12-Jul-18",
                            value: 1,
                            fullDate: "2018-07-12T07:00:00.000Z"
                        },
                        {
                            date: "13-Jul-18",
                            value: 6,
                            fullDate: "2018-07-13T07:00:00.000Z"
                        },
                        {
                            date: "14-Jul-18",
                            value: 5,
                            fullDate: "2018-07-14T07:00:00.000Z"
                        },
                        {
                            date: "15-Jul-18",
                            value: 2,
                            fullDate: "2018-07-15T07:00:00.000Z"
                        }
                    ]
                }
            ]
        };



        $(function(){
            $.ajax({
                url:"http://47.75.162.103:666/income/ajaxChartsList",
                type:'post',
                data:'',
                dataType:'json',
                success:function(data){
                    console.log("http://47.75.162.103:666/income/ajaxChartsList");
                    console.log(data);

                    lineData.dataByTopic[0].dates = data.list;

                    console.log(lineData.dataByTopic[0].dates);
                    drawCharts();
                },
                error:function(xhr,textStatus,errorThrown){
                }
            });
        });

        function drawCharts() {
            d3.selectAll('.bar-chart').remove();
            d3.selectAll('.line-chart').remove();


            if ($(".bar-container").length > 0) {
                createBarChart(".bar-container", barData);
            }

            if ($(".line-container").length > 0) {
                createLineChart(".line-container", lineData);
            }
        }

        // responsive charts
        $(window).on('resize', function (e) {
            e.preventDefault();
            setTimeout(drawCharts, 200);
        });

        //render charts
        drawCharts();
    </script>
</body>

</html>